<!-- 
	Note: The elements in this UI can be broken apart
	and spread around your page, as long as you keep the
	IDs intact. Elements can also be dropped without
	Dojo Offline's default UI breaking.
-->

<div id="dot-widget-container" style="visibility: hidden;">
	<div id="dot-widget-title-bar">
		<span id="dot-widget-network-indicator">
			<img id="dot-widget-network-indicator-online" />
			<img id="dot-widget-network-indicator-offline" />
		</span>
		<span id="dot-widget-title-text"></span>
	</div>
	
	<div id="dot-widget-contents">
		<div id="dot-widget-browser-restart">
			Please restart your browser to 
			use <span id="dot-widget-browser-restart-app-name"></span> Offline
		</div>
		
		<div id="dot-sync-status">
			<img id="dot-roller" />
			<img id="dot-success-checkmark" />
			<span id="dot-sync-messages"></span>
			<span id="dot-sync-details">
				(<a id="dot-sync-details-button" href="#">details</a>)
			</span>
			<span id="dot-sync-cancel">
				(<a id="dot-sync-cancel-button" href="#">cancel</a>)
			</span>
		</div>
		
		<div id="dot-widget-learn-how">
			<a id="dot-widget-learn-how-link" target="_blank" href="#">Learn How</a> 
			to use <span id="dot-widget-learn-how-app-name"></span>&nbsp;Offline!
		</div>
	</div>
</div>